5-1-5. クラス作成・ルール

Foundationレイヤー以外によるタグを直接指定するカスケーディングは禁止です。全ての要素にクラスを指定してください。
ただし、使用するタグの関係が確定している要素（li、dt、dd、th、tdなど）とモジュール内単体で使われるインライン要素への指定はクラスの設定を省略可とします。
ひとつのモジュールの中に同一種のインライン要素が複数存在する場合は個別にクラスを指定する必要があります。

✕
.c_module div{ ... }
.c_module h1{ ... }

△
.c_module li{ ... }
.c_module dt{ ... }

○
.c_module_item{ ... }

原則として、モジュール間のカスケーディング、他のモジュールを親とするセレクタを用いた指定は禁止とします。
クラス名でエレメントとブロックの関係性が分かるため必要以上に詳細度の高いカスケーディングは不要となります。また、特定のモジュールに依存した設定はモジュールの独立性を欠く可能性が高まりますので次の例のような指定は必ず避けてください。

✕
.c_module{ ... }
.c_module .c_module_item{ ... }

○
.c_module{ ... }
.c_module_item{ ... }

ただし、上位レイヤーが下位レイヤーの設定を上書きすることは許容します。
モディファイアで解決することも出来ますので、もし反映する内容がProject依存ではなく他で再利用するものであればモディファイアで解決するべきものとなります。使用する状況を加味し使い分けてください。

.c_module_image {
  width:100px;
  }

/* 上位レイヤーによる上書き */
.p_profile > .c_module_image {
  width:200px;
  }

.p_profile_image{
  width:200px;
  }

/* モディファイアによる解決 */
.c_media_image__large {
 width:200px;
 }

いかなる理由があっても下位レイヤーが上位レイヤーの設定を上書き・追加することは許容されません。
（Utilityクラスは単一の指定を持つクラスのため、Utilityレイヤーに依存した子要素は設計上作成できません。）

.c_module > .p_item_image{ ... }
.p_item > .u_clearfix{ ... }

/* Utilityは最上位レイヤーではあるが、レイヤーの性質上このような指定は不可 */
.u_clearfix > p_item_image{ ... }

外部のプラグインを使う時、そのプラグインから生成されるクラスの指定を変更したい場合、複数のセレクタを利用することは許容範囲内となります。

.c_module .plugin-class{ ... }
.c_module .plugin-class .plugin-sub-class{ ... }

全てのモジュール、中でもcomponentのレイヤーに属するモジュールは再利用性を考慮しモディファイアを活用したマルチクラスによる設計を行ってください。

.c_btn{
  display:inline-block;
  width:200px;
  border-radius:6px;
  font-weight:bold;
  color:#fff;
  padding:10px;
}
.c_btn__red{
  background:#f00;
  border:1px solid #f00;
}
.c_btn__large{
  width:400px;
}
.c_btn__block{
  display:block;
  width:100%;
}